<template>
    <page-main>
        <template>
            <div style="margin-bottom: 20px;">
                <el-button type="primary" icon="el-icon-plus" plain size="small" @click="add">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" plain size="small" @click="batchRemove">删除</el-button>
                <editInitIndustry ref="editInitIndustry" :dialog-visible="dialog.isVisible" @close="dialogClose" @success="success" />
            </div>
        </template>

        <el-table
            :header-cell-style="{background:'#F3F4F7',color:'#555'}"
            :data="tableData.records"
            border
            style="width: 100%;"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="40"
                align="center"
            />
            <el-table-column
                prop="name"
                label="行业名称"
            />

            <el-table-column
                prop="createTime"
                label="创建时间"
            />
            <el-table-column label="操作" width="135" align="center">
                <template slot-scope="scope">
                    <el-button v-if="!scope.row.readonly" type="text" @click="update(scope.$index, scope.row)">编辑</el-button>
                    <el-button v-if="!scope.row.readonly" type="text" @click="remove(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="tableData.total > 0" :limit.sync="queryParams.size" :page.sync="queryParams.current"
                    :total="Number(tableData.total)" @pagination="page"
        />
    </page-main>
</template>

<script>
import initIndustryApi from '@/api/init/industry'
import editInitIndustry from './edit'
import {initQueryParams} from '@/util/commons'
import pagination from '@/components/pagination/index'
export default {
    name: 'InitIndustry',
    components: { editInitIndustry, pagination },
    props: {},
    data() {
        return  {
            tableData: {
                total: 0
            },
            dialog: {
                isVisible: false,
                type: 'add',
                title: '添加'
            },
            queryParams: initQueryParams(), // 分页查询参数
            ids: [] // Checkbox 选中的id
        }
    },
    created() {},
    mounted() {
        this.page()
    },
    methods: {
        page() {
            initIndustryApi.page(this.queryParams).then(res => {
                this.tableData = res.data.data
            })
        },
        dialogClose() {
            this.dialog.isVisible = false
        },
        success() {
            this.page(this.queryParams)
        },
        add() {
            this.dialog.isVisible = true
            this.$nextTick(() => {
                this.$refs.editInitIndustry.dialogType = 'add'
                this.$refs.editInitIndustry.dialogTitle = '添加'
                // 清空表单
                this.$refs.editInitIndustry.resetForm('initIndustryForm')
            })
        },
        remove(index, row) {
            initIndustryApi.delete({ ids: [row.id] }).then(() => {
                this.success()
            })
        },
        batchRemove() {
            if (this.ids.length == 0) {
                return
            }
            initIndustryApi.delete({ ids: this.ids }).then(() => {
                this.ids = []
                this.success()
            })
        },
        update(index, row) {
            this.dialog.isVisible = true

            this.$nextTick(() => {
                this.$refs.editInitIndustry.dialogType = 'edit'
                this.$refs.editInitIndustry.dialogTitle = '修改'
                this.$refs.editInitIndustry.getInitIndustry(row.id)
            })
        },
        handleSelectionChange(val) {
            this.ids = val.map(item => item.id)
        }
    }
}
</script>
